<template>
	<div class="register">
		<!-- 注册页主体部分 start-->
		<div class="w">
		    <div class="register">
		        <div class="register_hd">
		            <div class="main">注册新用户</div>
		            <div class="sub">我有账号,去<router-link to="/login"><i>登录</i></router-link></div>
		        </div>
		        <div class="register_bd">
		            <ul>
		                <li>
		                    <label for="username">用户名：</label>
		                    <input type="text">
		                    <span>手机号码格式不正确，请从新输入</span>
		                </li>
		                <li>
		                    <label for="username">短信验证码：</label>
		                    <input type="text">
		                    <span>手机号码格式不正确，请从新输入</span>
		                </li>
		                <li>
		                    <label for="password">登陆密码：</label>
		                    <input type="password">
		                    <span>手机号码格式不正确，请从新输入</span>
		                </li>
		                <li>
		                    <label></label>
		                    <span>
		                        安全程度： <span>弱</span> <span>中</span> <span>强</span>
		                    </span>
		                </li>
		                <li>
		                    <label for="password">确认密码：</label>
		                    <input type="password">
		                    <span>手机号码格式不正确，请从新输入</span>
		                </li>
		                <li class="istrue">
		                    <label></label>
		                    <input type="checkbox">
		                    <span> 同意协议并注册</span>
		                    <span>《知果果用户协议》</span>
		                </li>
		                <li>
		                    <label></label>
		                    <button>完成注册</button>
		                </li>
		            </ul>
		        </div>
		    </div>
		</div>
		<!-- 注册页主体部分 stop-->
	</div>
</template>

<script>
</script>

<style scoped>
	.header {
	    border-bottom: 2px solid #b1191a;
	}
	
	.register {
	    margin-top: 20px;
	    height: 527px;
	}
	
	.register .register_hd {
	    width: 100%;
	    height: 43px;
	    line-height: 43px;
	    background-color: #ececec;
	    border: 1px solid #ccc;
	    overflow: hidden;
	}
	.register .register_bd {
	    width: 100%;
	    height: 484px;
	    border: 1px solid #ccc;
	    border-top: 0px;
	    overflow: hidden;
	}
	
	.register .register_hd .main {
	    float: left;
	    padding-left: 10px;
	    font-size: 18px;
	}
	.register .register_hd .sub {
	    float: right;
	    padding-right: 10px;
	    font-size: 14px;
	}
	.register .register_hd .sub i {
	    color: #c81623;
	}
	
	.register_bd ul{
	    width: 600px;
	    margin: 50px auto;
	    margin-bottom: 0px;
	    /* background-color: pink; */
	}
	.register_bd ul li {
	    margin-bottom: 20px;
	}
	.register_bd ul li label {
	    display: inline-block;
	    width: 120px;
	    text-align: right;
	}
	.register_bd ul li input {
	    width: 241px;
	    height: 35px;
	    border: 1px solid #ccc;
	}
	.register_bd ul li:nth-child(4)>span{
	    display: inline-block;
	    width: 241px;
	    text-align: right;
	}
	.register_bd ul li:nth-child(4)>span span{
	    display: inline-block;
	    width: 34px;
	    text-align: center;
	    color: #fff;
	    background-color: #de1111;
	}
	.register_bd ul li:nth-child(4)>span span:nth-child(2){
	    background-color: #40b83f;
	}
	.register_bd ul li:nth-child(4)>span span:nth-child(3){
	    background-color: #f79100;
	}
	
	.register_bd ul .istrue {
	    padding: 15px 0;
	}
	.register_bd ul .istrue input {
	    margin-left: -5px;
	    height: 15px;
	    width: 16px;
	}
	.register_bd ul .istrue span:last-child {
	    color: #1ba1e6;
	}
	.register_bd ul li button {
	    background-color: #c81623;
	    width: 200px;
	    height: 35px;
	    margin-left: 10px;
	    color: #fff;
	    font-size: 14px;
	}
</style>